<template>
	<view class="shop bgff px10 py12 mb8">
		<view class="flex flexS">
			<view class="fs10 rel r2 mt4">
				<image @click="lookRoom" class="logo r5" :src="item.logo" mode="aspectFill"></image>
			</view>
			<view class="flex1 pl8 right flex flexCol flexB">
				<view class="w-20">
					<view class="ellipsis1">
						<text class="c00 bold6">{{item.name}}</text>
						<text class="arrowR dinline"></text>
					</view>
					<view class="mt6 fs10 flex flexC flexW tags">
						<view v-for="(tmp,idx) in item.tagList" :key="idx">
							<text v-if="tmp != ''" class="bor57 r3 px8 py2 mr4 mb4">{{tmp}}</text>
						</view>
					</view>
				</view>
				
				<view class="fs12 flex flexE mt4 fs12 w-20">
					<view class="flex1 c66 fs11">
						
						<view v-for="(t,i) in item.set" :key="i" class="mt4">
							<text :class="t.time !='' ? 'bold8 fs13 cff0' : ''" >{{t.name}}：</text>
							
							<text class="cff0">￥</text>
							<text class="cff0 fs15 bold6">{{t.amount}}</text>
							<text class="">/{{t.hour}}小时</text>
						</view>
					</view>
					<view v-if="item.status != 'stop'" @click="openDetail" class="aliC w-6">
						<view class="bgf6c py6 fs14 btn r40 cff">预约</view>
						<!-- <view class="fs10  py2 cff0" v-if="item.useEndTime != -1">使用中</view>
						<view class="fs10 py2" v-else>空闲</view> -->

					</view>
				</view>
			</view>
		</view>
		<view class="mt18">
			<view class="flex flexC bgc3">
				<text v-for="tmp in item.timeSlot" :key="tmp.hour" class="line w12 boxS"
					:class="tmp.isBook==true? 'bg58' : 'bgc3'">
				</text>
			</view>
			<view class="flex flexS fs10">
				<text v-for="tmp in item.timeSlot" :key="tmp.hour"
					class="w12 boxS">{{tmp.hour == 0 ? '次日' : tmp.hour}}</text>
			</view>
			<view class="flex flexC mt6">
				<text class="bg58 px5 py3 r2"></text>
				<text class="c00 fs12 ml5 mr14">已预定时段</text>
				<text class="bgc3 px5 py3 r2 bg59"></text>
				<text class="c00 fs12 ml5">可预定时段</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "storeItem",
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		methods: {

			lookRoom() {
				let image = Array();
				uni.previewImage({
					urls: this.item.cover,
				});
			},
			openDetail() {
				this.$emit('openDetailPopup', this.item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		.right {min-height: 268rpx;}
		.tags {
			line-height: 50rpx;
			.bor57 {color: #F5C51D;}
		}
		.rel {
			position: relative;
			overflow: hidden;

			.tag {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				border-radius: 0 0 4rpx 4rpx;
				background-color: #ecd827;

				&.tag2 {
					background-color: #F3D25D;
					color: #000000;
				}

				&.tag3 {
					background-color: #5C8ACB;
					color: #FFFFFF;
				}

				&.tag4 {
					background-color: #FF0000;
					color: #FFFFFF;
				}
			}
		}

		.logo {
			width: 216rpx;
			height: 288rpx;
		}

		.ellipsis1 {
			width: 436rpx;

			&.flex1 {
				width: 280rpx;
			}
		}

		.local {
			width: 24rpx;
			height: 24rpx;
		}

		.w18 {
			width: 36rpx;
			height: 36rpx;
		}

		.bgc3 {
			background-color: #C3C3C3;
		}

		.line {
			position: relative;
			height: 20rpx;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				background: #FFF;
				width: 2rpx;
				height: 20rpx;
				display: inline-block;
			}

			&:last-child {
				&::after {
					display: none;
				}
			}
		}

		.w12 {
			width: calc(100% / 20);
		}

	}
</style>